<template>
  <div class="page">
    <div class="page-background">
      <div class="back">
        <div class="header">
          <div class="head-center">
            <span class="close-btn" @click="close">
              <var-icon name="chevron-left" />
            </span>
            <span class="title">添加课程</span>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="center">
        <div class="item">
          <div class="item-container">
            <span class="label iconfont">
              <img src="@/assets/datepicker.png" alt srcset />
            </span>
            <span class="text">{{ today.replace(/-/g, ".") }}</span>
          </div>
        </div>
        <div class="item">
          <div class="item-container">
            <span class="iconfont label">名称：</span>
            <span class="text">
              <input v-model="form.className" placeholder="输入课程名称" type="text" name id />
            </span>
          </div>
        </div>
        <div class="item">
          <div class="item-container textArea-container">
            <div class="iconfont label textareaLabel">备注：</div>
            <div class="textarea-input-box">
              <textarea v-model="form.remark" class="textarea" placeholder="输入备注内容（非必填）"></textarea>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item-container upload">
            <span class="iconfont label">图片：</span>

          </div>
          <var-uploader :maxlength="1" v-model="files" @after-read="handleAfterRead" />
        </div>
        <!-- 添加按钮 -->
        <var-loading :loading="loading">
          <div class="addBtn" @click="onClickAddRecord">
            <div class="addBtn-container">添加</div>
          </div>
        </var-loading>
      </div>
    </div>
  </div>
</template>

<script>
import { addClass } from "@/api";
import { reactive, ref, onMounted } from "vue";
import { useStore } from "vuex";
import { concatInt, getNowTime } from "@/util/formTime";
import defaultImg from "@/assets/book.png";
import { router } from "@/router";
import { Dialog } from "@varlet/ui";
import uploadImage from "@/util/uploadImg";
import { showToast } from "vant";

export default {
  name: "AddCalssView",
  components: {
    // TimeSelectComponent
  },
  setup(props, ctx) {
    // 上传文件照片
    const files = ref([]);
    async function handleAfterRead(file) {
      file.status = "uploading";
      file.message = '上传中...';
      debugger
      uploadImage({
        imgBase64: file.url,
        apiurl: "/upload-api/image/classImage",
        params: {
          userId: store.state.userInfo.userId,

        },
        success: (res) => {
          console.log("上传结果：", res)
          if (res.status === "0000") {
            const { imgUrl } = res.data;
            console.log("解析到url", imgUrl);
            // 更新store.state中的headImg
            setForm({ key: "imgUrl", val: imgUrl });

          } else {
            showToast(res.message);

          }
        },
        failure: () => {
          showToast('网络连接失败');

        },
        complete: () => { }
      })
    }
    // 控制添加按钮的加载状态
    const loading = ref(false);
    const setLoading = Boolean => {
      loading.value = Boolean;
    };
    const store = useStore();
    const defaultClassImg = defaultImg;
    const today = getNowTime("YYYY-MM-DD");

    // form表单
    const form = reactive({
      createDate: getNowTime("YYYY-MM-DD HH:mm:ss"),
      userId: store.state.userInfo.userId,
      userName: store.state.userInfo.userName,
      userPhone: store.state.userInfo.userPhone,
      remark: "",
      className: "",
      imgUrl: ""
    });
    // 设置form表单的函数
    const setForm = params => {
      const { key, val } = params;
      form[key] = val;
    };
    const close = () => {
      console.log("点击了返回按钮");
      router.push({ name: "class" });
    };

    // 添加课程事件
    const onClickAddRecord = () => {
      // console.log("表单数据：", form);
      setLoading(true);
      addClass({
        url: "/class-api/creteClass",
        params: {
          ...form
        },
        success: res => {
          console.log("创建成功", res);
          close();
        },
        error: error => {
          console.log("错误信息：", error);
          Dialog({
            title: "提示",
            message: "网络连接错误"
          });
        },
        complete: () => setLoading(false)
      });
    };



    return {
      files,
      handleAfterRead,
      loading,
      defaultClassImg, //导出默认图片
      today,
      form,
      close,
      onClickAddRecord,
      setForm
    };
  }
};
</script>

<style lang="scss" scoped>
.var-popup--bottom {
  height: 40%;

  .popup-example-block {
    padding: 20px 24px;
  }
}

.page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  background-color: rgb(254, 250, 238);

  .page-background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    .back {
      height: 200px;
      width: 100%;
      border-radius: 0 0 25px 25px;
      background-color: rgb(97, 99, 234);
      overflow: hidden;

      .header {
        width: 100%;
        height: 100%;

        // background-color: orange;
        .head-center {
          width: 100%;
          padding: 30px;
          position: relative;

          .close-btn {
            position: absolute;
            color: white;
            display: inline-block;
            border-radius: 50px;
            background-color: rgba(245, 245, 245, 0.365);
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .title {
            z-index: -1;
            width: 100%;
            line-height: 30px;
            display: inline-block;
            text-align: center;
            color: white;
            font-weight: 600;
          }
        }
      }
    }
  }

  .container {
    width: 100%;
    height: 100%;
    color: rgb(43, 43, 43);
    // padding: 20px;
    margin-top: 80px;
    font-size: 12px;

    .center {
      background-color: white;
      // height: 100%;
      padding: 10px;
      border-radius: 15px;

      .item {
        width: 100%;
        padding: 5px;

        .textArea-container {
          display: flex;
          flex-direction: column;
        }

        .item-container {
          padding: 3px 0;
          border-bottom: 1px solid rgb(255, 191, 184);
          line-height: 24px;
          display: flex;
          align-items: center;

          .iconfont {
            display: inline-block;
            width: 24px;
            height: 24px;
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .label {
            margin-right: 10px;
            font-size: 12px;
            width: auto;
          }

          .textareaLabel {
            display: block;
            display: flex;
            justify-content: flex-start;
            width: 100%;
          }

          .textarea-input-box {
            width: 100%;
            height: 50px;

            .textarea {
              width: 100%;
              height: 100%;
              border: none;
              outline: none;
            }
          }

          .text {
            display: inline-block;
            height: 24px;
            line-height: 24px;

            input {
              display: inline-block;
              outline: none;
              width: 100%;
              height: 100%;
              border: none;
            }
          }
        }

        .upload {
          border-bottom: none;
        }

        .select-class {
          padding: 3px 0;
          border-bottom: 1px solid rgb(255, 191, 184);

          .select-title {
            display: flex;
            justify-content: start;
          }

          .select-center::-webkit-scrollbar {
            width: none;
            height: none;
          }

          .select-center {
            display: flex;
            overflow-y: auto;

            .select-item {
              width: 70px;
              // height: 70px;
              padding: 4px 4px;

              .select-item-container {
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                padding: 2px;

                .img {
                  width: 100%;
                  flex: 1;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }

                .select-title {
                  width: 100%;
                }
              }
            }

            .active {
              .select-item-container {
                .img {
                  border: 1px solid rgba(238, 208, 12, 0.919);
                }

                // box-shadow: 0px 0px 6px 0px rgba(149, 149, 149, 0.6);
              }
            }
          }
        }
      }

      .addBtn {
        width: 100%;
        padding: 5px;

        .addBtn-container {
          width: 100%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-radius: 50px;
          background-color: #ffbfb8;
          color: white;
          font-weight: 600;
        }
      }
    }
  }
}
</style>